ignore: zen

1 files changed, 35 insertions, 101 deletions

diff --git a/cloud/app/src/routes/workspace/[id].css b/cloud/app/src/routes/workspace/[id].css
index e79d35621..397ceec54 100644
--- a/cloud/app/src/routes/workspace/[id].css
+++ b/cloud/app/src/routes/workspace/[id].css
@@ -1,5 +1,4 @@
-/* Root container */
-[data-slot="root"] {
+[data-page="workspace-[id]"] {
   max-width: 64rem;
   padding: var(--space-10) var(--space-4);
   margin: 0 auto;
@@ -28,83 +27,45 @@
       display: flex;
       flex-direction: column;
       gap: var(--space-6);
-    }
-    section:not(:last-child) {
-      border-bottom: 1px solid var(--color-border);
-      padding-bottom: var(--space-16);
-
-      @media (max-width: 30rem) {
-        padding-bottom: var(--space-8);
-      }
-    }
-  }
 
-  /* Common elements */
-  button {
-    padding: var(--space-3) var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    font-size: var(--font-size-sm);
-    font-family: var(--font-sans);
-    font-weight: 500;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: all 0.15s ease;
-
-    &:hover {
-      background-color: var(--color-surface-hover);
-      border-color: var(--color-accent);
-    }
-
-    &:active {
-      transform: translateY(1px);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
+      /* Section titles */
+      [data-slot="section-title"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1);
 
-      &:hover {
-        background-color: var(--color-bg);
-        border-color: var(--color-border);
-        transform: none;
-      }
-    }
+        h2 {
+          font-size: var(--font-size-md);
+          font-weight: 600;
+          line-height: 1.2;
+          letter-spacing: -0.03125rem;
+          margin: 0;
+          color: var(--color-text-secondary);
+          text-transform: uppercase;
 
-    &[data-color="primary"] {
-      background-color: var(--color-primary);
-      border-color: var(--color-primary);
-      color: var(--color-primary-text);
+          @media (max-width: 30rem) {
+            font-size: var(--font-size-md);
+          }
+        }
 
-      &:hover {
-        background-color: var(--color-primary-hover);
-        border-color: var(--color-primary-hover);
+        p {
+          line-height: 1.4;
+          font-size: var(--font-size-sm);
+          color: var(--color-text-muted);
+        }
       }
     }
+    section:not(:last-child) {
+      border-bottom: 1px solid var(--color-border);
+      padding-bottom: var(--space-16);
 
-    &[data-color="ghost"] {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-text-muted);
-
-      &:hover {
-        background-color: var(--color-surface-hover);
-        border-color: var(--color-border);
-        color: var(--color-text);
+      @media (max-width: 30rem) {
+        padding-bottom: var(--space-8);
       }
     }
   }
 
-  a {
-    color: var(--color-text);
-    text-decoration: underline;
-    text-underline-offset: var(--space-0-75);
-    text-decoration-thickness: 1px;
-  }
-
-  [data-slot="empty-state"] {
+  [data-component="empty-state"] {
     padding: var(--space-20) var(--space-6);
     text-align: center;
     border: 1px dashed var(--color-border);
@@ -121,7 +82,7 @@
   }
 
   /* Title section */
-  [data-slot="title-section"] {
+  [data-component="title-section"] {
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
@@ -156,35 +117,8 @@
     }
   }
 
-  /* Section titles */
-  [data-slot="section-title"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-
-    h2 {
-      font-size: var(--font-size-md);
-      font-weight: 600;
-      line-height: 1.2;
-      letter-spacing: -0.03125rem;
-      margin: 0;
-      color: var(--color-text-secondary);
-      text-transform: uppercase;
-
-      @media (max-width: 30rem) {
-        font-size: var(--font-size-md);
-      }
-    }
-
-    p {
-      line-height: 1.4;
-      font-size: var(--font-size-sm);
-      color: var(--color-text-muted);
-    }
-  }
-
   /* API Keys Section */
-  [data-slot="api-keys-section"] {
+  [data-component="api-keys-section"] {
     [data-slot="create-form"] {
       display: flex;
       gap: var(--space-3);
@@ -304,7 +238,7 @@
   }
 
   /* Balance Section */
-  [data-slot="balance-section"] {
+  [data-component="balance-section"] {
     [data-slot="balance"] {
       display: flex;
       flex-direction: column;
@@ -324,7 +258,7 @@
         gap: var(--space-1);
         justify-content: flex-end;
 
-        &.danger {
+        &[data-state="danger"] {
           [data-slot="value"] {
             color: var(--color-danger);
           }
@@ -348,7 +282,7 @@
   }
 
   /* Payments Section */
-  [data-slot="payments-section"] {
+  [data-component="payments-section"] {
     [data-slot="payments-table"] {
       overflow-x: auto;
     }
@@ -422,7 +356,7 @@
   }
 
   /* Usage Section */
-  [data-slot="usage-section"] {
+  [data-component="usage-section"] {
     [data-slot="usage-table"] {
       overflow-x: auto;
     }